<template>
  <div class="warp_user_background">
    <el-container>
      <el-header>
        <el-row>
          <el-col class="logo" :span="8" :style="{width:isCollapse?'64px':'240px'}">
            <strong>{{isCollapse?'君':'与君共赏'}}</strong>
          </el-col>
          <el-col class="info" :span="8">
            <i
              :class="isCollapse?'el-icon-d-arrow-right':'el-icon-d-arrow-left'"
              @click="isCollapse=!isCollapse"
            ></i>
          </el-col>
          <el-col :span="8" class="adminInfo">
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                <span>{{$store.state.user.userName}}</span>
                <img src="../assets/logo.png" alt />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="$store.commit('OUT_LOGIN')">退出登陆</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>

      <el-container>
        <el-aside :style="{width:isCollapse?'auto':'240px'}">
          <el-menu
            :collapse-transition="false"
            :router="true"
            :default-active="$route.path"
            class="el-menu-vertical-demo"
            :collapse="isCollapse"
          >
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-user-solid"></i>
                <span slot="title">我的设置</span>
              </template>
              <el-menu-item index="/user/userLog">学习记录</el-menu-item>
              <el-menu-item index="/user/userInformation">我的信息</el-menu-item>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-s-custom"></i>
                <span slot="title">我的收藏</span>
              </template>
              <el-menu-item index="/user/userCollection">收藏</el-menu-item>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-notebook-2"></i>
                <span slot="title">古诗词典</span>
              </template>
              <el-menu-item index="/user/userPoetry">古诗词</el-menu-item>
              <el-menu-item index="/user/userStudy">趣味学习</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main class="user_router_view">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script>
export default {
  name: "index",
  data() {
    return {
      isCollapse: false // 是否折叠
    };
  }
};
</script>

<style lang="scss">
.user_router_view {
  width: 100%;
}
.warp_user_background {
  opacity: 1;
}
.warp_user_background::after {
  content: "";
  background: url("~@/assets/aiqing.png") no-repeat;
  background-size: 100%;
  opacity: 0.2;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}
</style>
